<template>
    <div>
        <v-toolbar flat>
            <v-toolbar-title>Log</v-toolbar-title>
            <v-divider class="mx-4" inset vertical></v-divider>
            <v-spacer></v-spacer>
            <v-row>
                <v-col :cols="4" class="search-input">
                    <v-text-field v-model="query.username" label="username"></v-text-field>
                </v-col>
                <v-col :cols="4" class="search-input">
                    <v-text-field v-model="query.nickname" label="nickname"></v-text-field>
                </v-col>
                <v-col :cols="1" class="search-button">
                    <v-btn icon @click="doSearch">
                        <v-icon>
                            mdi-magnify
                        </v-icon>
                    </v-btn>
                </v-col>
                <v-col :cols="1" class="search-button">
                    <v-btn icon @click="doRefresh">
                        <v-icon>
                            mdi-refresh
                        </v-icon>
                    </v-btn>
                </v-col>
            </v-row>


        </v-toolbar>

        <v-data-table :server-items-length="total" :loading="loading" loading-text="Loading... Please wait"
            @update:items-per-page="changeLimit" @update:page="changePage" :headers="headers" :items="desserts"
            :items-per-page="query.limit" class="elevation-1">

            <template v-slot:item.log_time="{ item }">
                {{ dayjs(item.log_time).format("YYYY-MM-DD HH:mm:ss") }}
            </template>

            <template v-slot:no-data>
                <v-btn color="primary" @click="initialize">
                    刷新
                </v-btn>
            </template>
        </v-data-table>


        <v-snackbar v-model="snackbar">
            {{ text }}
            <template v-slot:action="{ attrs }">
                <v-btn color="pink" text v-bind="attrs" @click="snackbar = false">
                    Close
                </v-btn>
            </template>
        </v-snackbar>

    </div>
</template>
<script>

import { listUserLog } from "@/api/back/user";
import dayjs from "dayjs";

export default {
    name: "UserView",
    data() {
        return {
            loading: false,
            text: "",
            snackbar: false,
            headers: [
                {
                    text: '#',
                    align: 'start',
                    value: 'id',
                },
                { text: '账号', value: 'username' },
                { text: '昵称', value: 'nickname' },
                { text: 'ip', value: 'ip' },
                { text: '位置', value: 'location' },
                { text: '组', value: 'group_name' },
                { text: '时间', value: 'log_time' },
            ],
            desserts: [],
            query: {
                page: 1,
                limit: 10,
                username: "",
                nickname: ""
            },
            total: 0,
            dayjs,


        }
    },
    created() {
        this.initialize();
    },
    methods: {
        async initialize() {
            this.loading = true;
            let res = await listUserLog(this.query);
            this.loading = false;
            if (res.code == 200) {
                this.desserts = [...res.data];
                this.total = res.count;
            }
        },
        doRefresh() {
            this.query = {
                page: 1,
                limit: 10,
                username: "",
                nickname: ""
            };
            this.initialize();
        },
        doSearch() {
            this.query.page = 1;
            this.initialize();
        },
        changeLimit(val) {
            this.query.page = 1;
            this.query.limit = val;
            this.initialize();
        },
        changePage(val) {
            this.query.page = val;
            this.initialize();
        },



    }
}
</script>
<style lang="scss" scoped>
.search-input {
    margin-top: 20px;
}

.search-button {
    margin-top: 10px
}
</style>